import React, { Component } from 'react';
import { StyleSheet, View,TextInput,Image,Dimensions,Text } from 'react-native';
import AppStyle from '../styles/index';
import {txt,view} from '../comm/Size';
const { width, height } = Dimensions.get("window");
import Icon from 'react-native-vector-icons/FontAwesome';
import { Button } from 'react-native-elements'


export default class RegPage extends Component {
    static navigationOptions = {
        title: '注册',
        ...AppStyle.navTopBar
    }

    constructor(props) {
        super();
        this.state = {};
    }

    onPress = ()=> {
        this.props.navigation.navigate('HomePage')
    }


    render() {
        return (
            <View style={styles.container}>
                <View  style={styles.formWrap}>
                    <View style={styles.inputWrap}>
                        <View style={styles.inputIcon}>
                            <Icon name="phone"/>
                        </View>
                        <View>
                            <TextInput
                                style={styles.inputText}
                                underlineColorAndroid="transparent"
                                placeholder="输入手机号码"
                            />
                        </View>
                    </View>
                    <View style={styles.inputWrap}>
                        <View style={styles.inputIcon}>
                            <Icon name="lock"/>
                        </View>
                        <View>
                            <TextInput
                                style={styles.inputText}
                                underlineColorAndroid="transparent"
                                placeholder="输入密码"
                            />
                        </View>
                    </View>
                    <Button
                        buttonStyle={{borderRadius:40,marginTop:20}}
                        color="#FFF"
                        backgroundColor={AppStyle.mainColor}
                        title='注册'/>
                </View>
                <View style={styles.otherArea}>
                    <Text style={styles.linkBtn}>其他登录方式</Text>
                    <Text style={styles.linkBtn}>-----------------------------</Text>
                    <Icon style={styles.loginBtnIcon} name="wechat" size={30}></Icon>
                </View>
            </View >
        )
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 20,
        flex:1
    },
    formWrap:{
      flex:1
    },
    inputWrap: {
        flexDirection: "row",
        height: view(80),
        marginHorizontal: view(40),
        marginVertical: view(10),
        borderBottomColor: "#CCC",
        borderBottomWidth: 1
    },
    inputIcon: {
        height: view(80),
        justifyContent: "center",
        marginRight: view(20)
    },
    inputText: {
        width: view(400)
    },
    otherArea: {
        alignItems: "center",
        height: view(300)
    },
    linkBtn: {
        alignSelf: "center",
        color: "#928E8F"
    },
    loginInfo: {
        height: view(50),
        width: view(570)
    },
    loginBtnIcon: {
        marginTop: 20
    }
})